<html>
	<head>
		<!--Load the AJAX API-->
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript">

		  // Load the Visualization API and the controls package.
		  // Packages for all the other charts you need will be loaded
		  // automatically by the system.
		  google.load('visualization', '1.0', {'packages':['controls','table']});

		  // Set a callback to run when the Google Visualization API is loaded.
		  //google.setOnLoadCallback(drawChart);
		  google.setOnLoadCallback(loadData);
		  //Draw Dashboard
		  function loadData()
		  {
			var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1n8_aSsZQ4IEZS7kw_VD-3tqkPbCdJBASuvU9SDK8MVY/edit?usp=sharing');
			query.setQuery('select *');
			query.send(handleQueryResponse);
			
			loadPieChart();
		  }
		  
		  function loadPieChart(){
			var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1n8_aSsZQ4IEZS7kw_VD-3tqkPbCdJBASuvU9SDK8MVY/edit?usp=sharing');
			query.setQuery('select K, count (A) where K is not null group by K');
			query.send(drawPieChart);
		  }
		  
		  function drawPieChart(response){
			if (response.isError()) {
				alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
				return;
			  }
			
			var pie = new google.visualization.ChartWrapper({
					'dataTable': response.getDataTable(),
					'chartType': 'PieChart',
					'containerId': 'pieChart_div',
					'options': {
					  'pieSliceText': 'value',
					  'width': 750,
					  'height': 400,
					  'title': 'Where do partners first meet?',
					},
					'view': {'columns': [0,1]}
				  });
			
			pie.draw();
			
			
		  }
		  
		  function readyHandler(){
			//alert(idFilter.toJSON());
		  }
		  
		  function handleQueryResponse(response) {
			  if (response.isError()) {
				alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
				return;
			  }
			  var data = response.getDataTable();
			
			  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
			  
			    // ID Filter
			  var idFilter = new google.visualization.ControlWrapper({
					'controlType': 'CategoryFilter',
					'containerId': 'idfilter_div',
					  'options':{
						'filterColumnIndex':2,
						'ui':{
						  'labelStacking': 'horizontal',
						  'label': 'ID Number',
						  'allowTyping': false,
						  'allowMultiple': false}
						}
				  });
				  
				//Single Filter
				var isSingle = new google.visualization.ControlWrapper({
				  'controlType': 'CategoryFilter',
				  'containerId': 'isSingleFilter_div',
				  state:{
					'selectedValues': ['No']
				  },
				  'options':{
					'filterColumnIndex':7,
					'ui':{
					  'labelStacking': 'horizontal',
					  'label': 'Single',
					  'allowTyping': false,
					  'allowMultiple': false
					}
				  }
				});
				
				//Course Filter
				var courseFilter = new google.visualization.ControlWrapper({
				  'controlType': 'CategoryFilter',
				  'containerId': 'courseFilter_div',
				  'options':{
					'filterColumnIndex':3,
					'ui':{
					  'labelStacking': 'horizontal',
					  'label': 'Course',
					  'allowTyping': false,
					  'allowMultiple': false
					}
				  }
				});
				
				//Department Filter
				var departmentFilter = new google.visualization.ControlWrapper({
				  'controlType': 'CategoryFilter',
				  'containerId': 'departmentFilter_div',
				  'options':{
					'filterColumnIndex':4,
					'ui':{
					  'labelStacking': 'horizontal',
					  'label': 'Department',
					  'allowTyping': false,
					  'allowMultiple': false
					}
				  }
				});
				
				//Gender Filter
				var genderFilter = new google.visualization.ControlWrapper({
				  'controlType': 'CategoryFilter',
				  'containerId': 'genderFilter_div',
				  'options':{
					'filterColumnIndex':6,
					'ui':{
					  'labelStacking': 'horizontal',
					  'label': 'Gender',
					  'allowTyping': false,
					  'allowMultiple': false
					}
				  }
				});
				
				//Gender Preference Filter
				var genderPreferenceFilter = new google.visualization.ControlWrapper({
				  'controlType': 'CategoryFilter',
				  'containerId': 'genderPreferenceFilter_div',
				  'options':{
					'filterColumnIndex':7,
					'ui':{
					  'labelStacking': 'horizontal',
					  'label': 'Gender Preference',
					  'allowTyping': false,
					  'allowMultiple': false
					}
				  }
				});
				
				// Introduce to Parents
				  var introduce = new google.visualization.ChartWrapper({
					'chartType': 'Histogram',
					'containerId': 'introduce_div',
					'options': {
					  'legend': {position: 'top'},
					  'width': 750,
					  'height': 400,
					  'title': 'How long before they introduce to their parents',
					},
					'view': {'columns': [1,12]}
				  });
				  
				// Failed Relationships
				  	var failedRelationships = new google.visualization.ChartWrapper({
					'chartType': 'Histogram',
					'containerId': 'failedRelationships_div',
					'options': {
					  'legend': {position: 'top'},
					  'width': 750,
					  'height': 400,
					  'title': 'Number of failed relationships',
					},
					'view': {'columns': [1,32]}
				  });
				dashboard.bind([idFilter,courseFilter,departmentFilter,genderFilter,genderPreferenceFilter,isSingle], [introduce,failedRelationships]);
				dashboard.draw(data);
				google.visualization.events.addListener(dashboard, 'ready', readyHandler);
			}
		</script>
	</head>
	
	<body>
		<!--Div that will hold the dashboard-->
		<div id="pieChart_div"></div>
		<div id="dashboard_div">
		  <!--Divs that will hold each control and chart-->
		  <div id="introduce_div"></div>
		  <div id="failedRelationships_div"></div>
		  
		  </br>
		  <div id="idfilter_div"></div>
		  </br>
		  <div id="courseFilter_div"></div>
		  </br>
		  <div id="departmentFilter_div"></div>
		  </br>
		  <div id="genderFilter_div"></div>
		  </br>
		  <div id="genderPreferenceFilter_div"></div>
		  </br>
		  <div id="isSingleFilter_div"></div>
		  </br>
		</div>
	</body>
	
</html>